<template>
  <div style="height: 1176.87px; width: 1290px; margin: 0 auto">
    <div>
      <div style="float: left; width: 50%; margin-bottom: 20px">
        <Map></Map>
      </div>
      <div style="float: right; width: 50%; margin-bottom: 20px">
        <Rose></Rose>
      </div>
      <div style="clear: both"></div>
    </div>
    <div>
      <div class="header">
        <div class="header_new">
          <h3 style="float: left">广西疫情新闻资讯</h3>
          <div
            style="float: right; background-color: #0b53a7; line-height: 90px"
            class="pointer_1"
            @click="goto_new"
          >
            更多>>>
          </div>
          <div style="clear: both"></div>
        </div>
        <div class="header_hos">
          <h3 style="float: left">广西疫情新闻资讯</h3>
          <div
            style="float: right; background-color: #0b53a7; line-height: 90px"
            class="pointer_1"
            @click="goto_hos"
          >
            更多>>>
          </div>
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="new">
        <div>
          <div v-for="item in article1.list" :key="item.id">
            <div class="info1">
              <div
                v-if="item.title.search('广西') != -1"
              >
                <el-tag>发布时间</el-tag>
                {{ item.publishTime | dateFMT }}
              </div>
              <div
                v-else-if="item.title.search('柳州') != -1"

              >
                <el-tag>发布时间</el-tag>
                {{ item.publishTime | dateFMT }}
              </div>
              <div
                v-if="item.title.search('广西') != -1"
                class="infobox pointer_1"
                @click="show_content(item.content)"
              >
                {{ item.title }}
              </div>
              
              <div
                v-else-if="item.title.search('柳州') != -1"
                class="infobox pointer_1"
                @click="show_content(item.content)"
              >
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hospital">
        <div>点击搜索医院</div>
        <div style="margin-bottom: 10px">
          <el-input
            placeholder="请输入医院名称"
            v-model="input"
            @change="search1"
          ></el-input>
        </div>
        <div>
          <div class="item" v-for="item in hos.list" :key="item.id">
            <div class="info1">
              <div
                v-if="item.address.search('广西') != -1"
                class="infobox pointer_1"
                @click="toMap(item)"
              >
                {{ item.name }}
                <div style="float: right">
                  <div>{{ GetDistance(item.latitude, item.longitude) }}KM</div>
                </div>
              </div>
              <div
                v-if="item.address.search('广西') != -1"
                style="margin-bottom: 10px"
              >
                <el-tag type="success">详细地址</el-tag>
                {{ item.address }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog title="文章内容" :visible.sync="dialogVisible" width="30%">
        <div v-html="this.content">
          {{ this.content }}
        </div>
      </el-dialog>
      <div style="clear: both"></div>
    </div>
  </div>
</template>
<script>
import Map from "../../components/GuangXiMap";
import Rose from "../../components/rose";
import { mapActions, mapState } from "vuex";
export default {
  components: {
    Map,
    Rose,
  },
  data() {
    return {
      input: "",
      obj: {
        page: 1,
        pageSize: 100,
      },
      total: 0,
      total1: 0,
      timer: null,
      dialogVisible: false,
      content: "",
      lat: 0,
      lng: 0,
    };
  },

  computed: {
    ...mapState("dataList", ["dataList"]),
    ...mapState("article", ["article1"]),
    ...mapState("hos", ["hos"]),
  },
  created() {
    this.page_query_article(this.obj);
    this.findHos(this.obj);
    this.getlocation();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    ...mapActions("dataList", ["page_query"]),
    ...mapActions("article", ["page_query_article"]),
    ...mapActions("hos", ["findHos"]),
    goto_new() {
      this.$router.push({
        path: "/manager/article",
      });
    },
    goto_hos() {
      this.$router.push({
        path: "/hos/index",
      });
    },
    search1(val) {
      this.obj.name = val;
      this.findHos(this.obj);
    },
    show_content(val) {
      this.dialogVisible = true;
      this.content = val;
    },
    toMap(val) {
      this.$router.push({
        path: "/hos/detail",
        //路由传递参数
        query: {
          one: val.latitude,
          two: val.longitude,
        },
      });
    },
    GetDistance(lat1, lng1) {
      var radLat1 = (lat1 * Math.PI) / 180.0;
      var radLat2 = (this.lat * Math.PI) / 180.0;
      var a = radLat1 - radLat2;
      var b = (lng1 * Math.PI) / 180.0 - (this.lng * Math.PI) / 180.0;
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        );
      s = s * 6378.137; // EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000;
      return s;
    },
    getlocation() {
      navigator.geolocation.getCurrentPosition(
        (res) => {
          this.lat = res.coords.latitude;
          this.lng = res.coords.longitude;
        },
        (err) => {
          console.log(err);
        },
        {
          //高精度定位
          enableHighAccuracy: true,
          timeout: 5000,
          maximumAge: 0,
        }
      );
    },
  },
};
</script>
<style scoped>
.pointer_1 {
  cursor: pointer;
}
.new {
  overflow: auto;
  float: left;
  height: 600px;
  width: 49%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.hospital {
  overflow: auto;
  float: right;
  height: 600px;
  width: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.header_new {
  line-height: 50px;
  font-size: 18px;
  color: white;
  background-color: #0b53a7;
  float: left;
  width: 49%;
}
.header_hos {
  line-height: 50px;
  font-size: 18px;
  color: white;
  background-color: #0b53a7;
  float: right;
  width: 50%;
}
.info1 {
  margin-bottom: 10px;
  font-size: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.infobox {
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
}
</style>